.loading {
	position: absolute;
	left: 50%;
	top: 50%;
}

.emptycontent {
	padding-top: 30vh;
	margin-top: 0px;
}
.emptycontent > h2 {
	padding-top: 20px;
}

.container {
	position: relative;
	width: 100%;
	height: 100%;
}

.mail-account {
	max-width: 100%;
	height: 44px;
	padding-left: 30px;
	background-color: transparent;
	border: none;
}

.folders .ui-droppable-active {
	background-color: rgb(240, 240, 240);
}

.folder.no-select {
	cursor: not-allowed;
}

/* ACCOUNT FORM */
#account-form {
	z-index: 1001;
	width: 250px;
	top: 15%;
	padding-bottom: 50px;
	margin: 0 auto;
	padding-top: 30px;
}
@media only screen and (max-height: 400px) {
	#account-form #emptycontent {
		margin-top: 0px;
	}
}
@media only screen and (min-height: 401px) and (max-height: 600px) {
	#account-form #emptycontent {
		margin-top: 2vh;
	}
}
@media only screen and (min-height: 601px) {
	#account-form #emptycontent {
		margin-top: 10vh;
	}
}
#account-form h2 {
	text-align: center;
	position: relative;
	width: 300%;
	left: -100%;
	margin-bottom: 20px;
}
#account-form input {
	width: 100%;
	box-sizing: border-box;
}

#account-form .toggle-manual-mode {
	background-position: right;
	padding-right: 16px;
	margin-left: 6px;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	opacity: .3;
}

#setup-imap-ssl-mode,
#setup-smtp-ssl-mode {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	background-color: transparent;
	border: none;
	z-index: 100;
}

#connect-loading {
	position: absolute;
	top: 206px;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	height: 30px;
}

/* app navigation */

/* fix scrolling */
#app-navigation {
	overflow: hidden;
}

#app-navigation .utils {
	padding: 0 16px;
}

/* do not display empty folders in the sidebar */
#app-navigation .empty {
	display: none;
}

#app-navigation .special-inbox,
#app-navigation .special-all {
	display: block;
}


/* do not overlap collapse icon with special use icon */
#app-navigation .special-inbox .collapse,
#app-navigation .special-drafts .collapse,
#app-navigation .special-sent .collapse,
#app-navigation .special-trash .collapse {
	display: none !important;
}
#app-navigation .special-inbox:hover .collapse,
#app-navigation .special-inbox:focus .collapse,
#app-navigation .special-drafts:hover .collapse,
#app-navigation .special-drafts:focus .collapse,
#app-navigation .special-sent:hover .collapse,
#app-navigation .special-sent:focus .collapse,
#app-navigation .special-trash:hover .collapse,
#app-navigation .special-trash:focus .collapse {
	display: inline-block !important;
}


/* START: should be done in core/apps.css */

#app-navigation .collapse {
	display: inline-block !important;
	opacity: .3;
	z-index: 1;
}

#app-navigation-accounts {
	height: calc(100% - 65px);
	overflow-x: hidden;
}

#app-navigation ul ul {
	display: block;
}

#app-navigation ul ul ul {
	display: none;
}

#app-navigation .navigation-account {
	position: relative;
}
#app-navigation .navigation-account .app-navigation-entry-utils-menu-button {
	/* show the account menu toggle (three dots) by default */
	display: inline-block;
}

#app-navigation ul ul li > a {
	padding-left: 32px;
}

#app-navigation ul .collapsible.open:hover {
	box-shadow: inset 0 0 3px #ddd;
}

#app-navigation ul .collapsible.open ul {
	display: block;
}
/* STOP: should be done in core/apps.css */

#emptycontent,
#mail-messages #emptycontent.emptycontent-search {
	position: static;
}
#mail-messages #emptycontent.emptycontent-search h2 {
	line-height: 150%;
}
#mail-messages #emptycontent {
	position: absolute;
}

.mail-account-email {
	display: inline-block;
	opacity: .5;
	padding: 20px 0 10px 25px;
	width: calc(100% - 50px);
	margin: initial;
	font-size: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mail-account-email:first-child {
	display: none;
}
.account-toggle-collapse {
	display: block;
	margin-top: 10px;
	margin-left: 43px;
	opacity: .2;
	cursor: pointer;
}
.account-toggle-collapse:hover {
	opacity: .5;
}

.mail-account-color {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	position: relative;
	left: 15px;
	top: -12px;
}
/* color dot position fix for Safari */
@media not all and (min-resolution:.001dpcm) { @media
{
.mail-account-color {
        top: 2px;
}
}}

.mail-message-account-color {
	position: absolute;
	width: 2px;
	height: 69px;
	z-index: 1;
}


/* settings */

.mailaccount-list li {
	padding: 10px 0;
}
.mailaccount-list .mail-account-name {
	display: inline-block;
	width: 90%;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mailaccount-list .actions {
	display: inline-flex;
	position: absolute;
	right: 0;
	min-height: 16px;
	min-width: 16px;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
	opacity: .25;
}
.mailaccount-list .actions:hover,
.mailaccount-list .actions:focus {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	opacity: .5;
}


/* app content*/

#mail-messages {
	position: relative;
	width: 30%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	border-right: 1px solid #ebebeb;
}
#mail-message-list-loading {
	position: fixed;
	width: 22%;
	height: 40px;
	z-index: 1;
	background: -moz-radial-gradient(top, ellipse cover, rgba(255,255,255,1), rgba(255,255,255,0) 70%);
	background: -webkit-radial-gradient(top, ellipse cover, rgba(255,255,255,1),rgba(255,255,255,0) 70%);
	background: radial-gradient(ellipse at top, rgba(255,255,255,.9),rgba(255,255,255,0) 70%);
}
#load-more-mail-messages {
	margin: 10px auto;
	padding: 10px;
	margin-top: 50px;
	margin-bottom: 200px;
}
/* TODO: put this in core icons.css as general rule for buttons with icons */
#load-more-mail-messages.icon-loading-small {
	padding-left: 32px;
	background-position: 9px center;
}

.mail-message-header {
	height: 68px;
}

.mail-message-summary {
	border-top: 1px solid #eee;
	position: relative;
}
.mail-message-summary:hover,
.mail-message-summary:focus,
.mail-message-summary.active {
	background-color: #f8f8f8;
}

.mail-message-summary * {
	cursor: pointer;
}

.sender-image {
	display: inline-block;
	position: absolute;
	padding: 5px;
	padding-left: 10px;
}

.mail-message-summary-from,
.mail-message-summary-subject,
.mail-message-summary .date {
	display: inline-block;
	padding: 12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mail-message-summary-from {
	width: 55%;
	margin-left: 37px;
	padding-bottom: 0;
	opacity: .5;
}

.mail-message-summary-subject {
	padding-top: 0;
	width: 75%;
	margin-left: 37px;
}

.mail-message-summary .date {
	position: absolute;
	font-size: 80%;
	right: 0;
	top: 0;
	max-width: 40%;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	opacity: .5;
}

.mail-message-summary.unseen .mail-message-summary-from,
.mail-message-summary.unseen .mail-message-summary-subject {
	font-weight: bold;
}

#mail-messages .action.delete {
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 20px;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
	opacity: .15;
}
#mail-messages .action.delete:hover,
#mail-messages .action.delete:focus {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	opacity: .5;
}

#app-navigation .msg.success {
	color: #fff;
	background-color: #47a447;
	padding: 3px;
}
#app-navigation .msg.error {
	color: #fff;
	background-color: #d2322d;
	padding: 3px;
}

/* override core values to work with custom html */
#app-navigation .app-navigation-entry-utils {
	top: 7px;
}

/* autocomplete list */
.ui-autocomplete .ui-menu-item a.mail-recipient-autocomplete {
	display: flex;
	align-content: center;
	align-items: center;
}
.ui-autocomplete .ui-menu-item a.mail-recipient-autocomplete span {
	margin-left: 10px;
}
.ui-autocomplete {
	padding-left: 16px !important;
	border-radius: 0 !important;
	border-left: none;
	border-right: none;
}

/* editor */
#mail-new-message-fixed {
	z-index: 111; /* navigation menu is 110 ;-) */
	background-color: rgba(255, 255, 255, .75);
	padding: 10px;
	position: relative;
}
#mail-new-message-list {
	margin-top: 36px;
}
#mail_new_message {
	width: 100%;
	padding: 10px;
	padding-left: 34px;
	background-position: 10px center;
	text-align: left;
	margin: 0;
}

.message-composer {
	margin: 0;
	margin-bottom: 10px; /* line up with the send button */
	z-index: 100;
}
#reply-composer .message-composer {
	margin: 0;
}
.composer-fields {
	position: relative;
}
input.to,
input.cc,
input.bcc,
input.subject,
textarea.message-body {
	width: 100%;
}
input.to,
input.cc,
input.bcc,
input.subject,
textarea.message-body {
	padding: 12px;
	padding-left: 64px;
	border: 1px solid #eee;
	border-right: none;
	border-left: none;
	border-radius: 0;
	margin: 0;
}
input.to {
	padding-right: 60px; /* for cc-bcc-toggle */
}
input.cc,
input.bcc,
input.subject,
textarea.message-body {
	border-top: none;
}
input.subject {
	font-size: 20px;
	font-weight: 300;
}
input.subject,
textarea.message-body {
	padding-left: 30px;
}
textarea.message-body {
	min-height: 300px;
	resize: none;
	padding-right: 25%;
}

.composer-cc-bcc {
	position: relative;
}
label.to-label,
label.cc-label,
label.bcc-label {
	position: absolute;
	left: 0;
	top: 0;
	padding: 12px;
	padding-left: 30px;
	cursor: text;
	opacity: .5;
}
label.bcc-label {
	top: initial;
	bottom: 0;
}
.composer-cc-bcc-toggle {
	position: absolute;
	right: 0;
	padding: 12px;
}
textarea.reply {
	min-height: 100px;
}
input.submit-message,
.submit-message-wrapper {
	position: fixed;
	bottom: 10px;
	right: 15px;
}
.submit-message-wrapper {
	position: fixed;
	height: 36px;
	width: 60px;
}

.submit-message-wrapper-inside {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 102;
}
#reply-msg {
	float: left;
}

/* extra button styles */
.submit-message.send,
#mail_new_attachment,
#forward-button {
	padding: 12px;
}
.new-message-attachments,
#forward-button {
	margin-left: 30px;
}

.unread {
	font-weight: bold;
}
/* make sure subfolders of unread folders are not bolded as well */
.unread ul {
	font-weight: normal;
}


.avatar {
	width: 32px;
	height: 32px;
}

.star {
	padding: 20px;
	background-size: 16px;
	display: inline-block;
	position: absolute;
	left: 16px;
	top: 28px;
	z-index: 10;
}
/* only show star on hover of row */
.star.icon-star {
	display: none;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	opacity: .3;
}
.star.icon-star:hover,
.star.icon-star:focus {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	opacity: 1;
}
.mail-message-summary.active .star.icon-star,
.mail-message-summary:hover .star.icon-star,
.mail-message-summary:focus .star.icon-star {
	display: inline-block;
}

.icon-reply {
	background-image: url('../img/reply.svg');
	position: absolute;
	left: 49px;
	top: 40px;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	opacity: .5;
}
.icon-reply ~ .mail-message-summary-subject {
	margin-left: 57px;
	width: 65%;
}

.icon-attachment {
	position: absolute;
	left: 9px;
	top: 40px;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
	opacity: .25;
}

.icon-reply,
.icon-attachment {
	min-width: 16px;
	min-height: 16px;
}

.icon-add {
	display: inline-block;
	vertical-align: text-top;
}


/* message display */

.mail-message-body {
	margin-bottom: 100px;
}

#mail-message-header {
	position: fixed;
	height: 90px;
	width: 50%;
	z-index: 100;
	background: -webkit-linear-gradient(rgba(255,255,255,.97), rgba(255,255,255,.9) 80%, rgba(255,255,255,0));
	background: -o-linear-gradient(rgba(255,255,255,.97), rgba(255,255,255,.9) 80%, rgba(255,255,255,0));
	background: -moz-linear-gradient(rgba(255,255,255,.97), rgba(255,255,255,.9) 80%, rgba(255,255,255,0));
	background: linear-gradient(rgba(255,255,255,.97), rgba(255,255,255,.9) 80%, rgba(255,255,255,0));
}

#mail-message-header h2,
#mail-message-header p {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-bottom: 7px;
	margin-bottom: 0;
}

#mail-message-close {
	display: none;
}

#mail-content,
.mail-message-attachments {
	margin: 100px 10px 50px 30px;
}
.mail-message-attachments {
	margin-top: 10px;
}
#mail-content iframe {
	width: 100%;
}

#show-images-text {
	display: none;
}

#mail-content a,
.mail-signature a {
	color: #07d;
	border-bottom: 1px dotted #07d;
	text-decoration: none;
	word-wrap: break-word;
}
.mail-signature {
	font-family: monospace;
	opacity: 0.5;
	line-height: initial;
}

.transparency {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	opacity: .5;
}
#mail-message-header .transparency {
	color: rgba(0, 0, 0, .3) !important;
	opacity: 1;
}
#mail-message-header .transparency a {
	color: rgba(0, 0, 0, .5) !important;
}

#mail-message {
	position: absolute;
	top: 0;
	right: 0;
	width: 70%;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
}
.mail-message-container {
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
}

.new-message-attachments li {
	padding: 10px;
}
.new-message-attachments-action {
	display: inline-block;
	vertical-align: middle;
	padding: 22px;
	opacity: .5;
}

.mail-message-attachments {
	margin-bottom: 20px;
}
.mail-message-attachments .attachments > div {
	position: relative;
	display: inline-block;
	border: 1px solid #f5f5f5;
	border-radius: 3px;
	margin: 0 10px 10px 0;
	padding: 5px;
}
.mail-message-attachments .attachments > div:hover,
.mail-message-attachments .attachments > div span:hover {
	background-color: #f8f8f8;
	cursor: pointer;
}
@media only screen and (max-width: 768px) {
	.mail-message-attachments .attachments > div {
		width: calc(100% - 5px);
	}
}
@media only screen and (min-width: 769px) and (max-width: 1400px) {
	.mail-message-attachments .attachments > div {
		width: calc(50% - 10px);
	}
}
@media only screen and (min-width: 1401px) {
	.mail-message-attachments .attachments > div {
		width: calc(33% - 12px);
	}
}
.mail-message-attachments .mail-attached-image {
	max-width: 100%;
	max-height: 120px;
}
.attachment-save-to-cloud,
.attachment-download,
.attachment-import {
	position: absolute;
	height: 32px;
	width: 32px;
	margin: 0;
	bottom: 0;
	background-color: transparent;
	border-color: transparent;
}
.attachment-save-to-cloud {
	right: 0;
}
.attachment-download {
	right: 32px;
	opacity: .6;
}
.attachment-import {
	right: 64px;
}
.attachment-import-popover {
	right: 32px;
	top: 42px;
}
.attachment-import-popover::after {
	right: 32px;
}
/* show icon + text for Download all button
	as well as when there is only one attachment */
.attachments-save-to-cloud,
.attachments-download,
.mail-message-attachment-single .attachment-save-to-cloud,
.mail-message-attachment-single .attachment-download {
	background-position: 9px center;
	padding-left: 32px;
}
.attachment-name {
	display: inline-block;
	width: calc(100% - 108px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
}
/* show attachment size less prominent */
.attachment-size {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	opacity: .5;
}
.attachment-icon {
	vertical-align: middle;
}

/* attachment filenames */
.new-message-attachment-name {
	display:inline-block;
}
/* Colour the filename with a different color during attachment upload */
.new-message-attachment-name.upload-ongoing {
	color: #0082c9;
}
/* Colour the filename in red if the attachment upload failed */
.new-message-attachment-name.upload-warning {
	color: #d2322d;
}
/* Red ProgressBar for failed attachment uploads */
.new-message-attachment-name.upload-warning .ui-progressbar-value {
	border: 1px solid #e9322d;
	background: #e9322d;
}


/* compose (handling mailto links) */

.compose {
	width: 60%;
	margin: 0 auto;
}

/* settings */
.mailaccount-list .mail-account-name {
	display: inline-block;
	width: 90%;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mailaccount-list .actions {
	opacity: .5;
}
.app-settings-hint {
	margin-top: 15px;
	color: #555;
}

/* icons */
.icon-inbox {
	background-image: url('../img/inbox.svg');
}
.icon-flagged {
	background-image: url('../img/star.svg');
}
.icon-drafts {
	background-image: url('../img/drafts.svg');
}
.icon-sent {
	background-image: url('../img/sent.svg');
}
.icon-archive {
	background-image: url('../img/archive.svg');
}
.icon-junk {
	background-image: url('../img/junk.svg');
}
.icon-trash {
	background-image: url('../img/trash.svg');
}
